<template>
  <div class="customer-list">
    <span style="font-size: 30px; position: relative; top: -10px"
      >客户列表</span
    >
    <!-- 这里放置表格等内容 -->
    <div class="add-button-bottom">
      <el-button class="add-button" @click="showAddModal">新增客户</el-button>
    </div>
    <!-- 下划线分隔 -->
    <el-divider></el-divider>
    <el-table :data="list" style="width: 100%" class="centered-table">
      <el-table-column prop="w_code" label="编号"></el-table-column>
      <el-table-column
        prop="client_name"
        label="客户公司名称"
      ></el-table-column>
      <el-table-column prop="client_head" label="负责人"></el-table-column>
      <el-table-column prop="client_phone" label="负责人手机"></el-table-column>
      <el-table-column prop="client_address" label="公司地址"></el-table-column>
      <el-table-column prop="client_remark" label="备注"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.client_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-divider></el-divider>
    <!-- 下划线分隔 -->

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="change"
      @current-change="Ymchange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rows"
    >
    </el-pagination>

    <!-- 模态框 -->
    <el-dialog
      title="添加"
      :visible.sync="isAddModalVisible"
      width="400px"
      :close-on-click-modal="false"
      class="qw"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="编号" v-if="yincang">
          <el-input
            v-model="form.w_code"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称*">
          <el-input
            v-model="form.client_name"
            autocomplete="off"
            placeholder="请输入客户名称" 
            maxlength="20"
            show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="负责人姓名*">
          <el-input
            v-model="form.client_head"
            autocomplete="off"
            placeholder="请输入负责人姓名"
             maxlength="10"
             show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="负责人手机*">
          <el-input
            v-model="form.client_phone"
            autocomplete="off"
            placeholder="请输入负责人手机号"
             maxlength="11"
             show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input
            v-model="form.client_address"
            autocomplete="off"
            placeholder="请输入公司地址"
             maxlength="30"
             show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form.client_remark"
            autocomplete="off"
            placeholder="请输入备注"
             maxlength="60"
             show-word-limit ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center">
          <el-button
            @click="isAddModalVisible = false"
            style="
              margin-right: 20px;
              background-color: #4fc1b0;
              border-color: #4fc1b0;
              color: #fff;
            " >取消</el-button
          >
          <el-button   type="primary"   @click="submitForm"
            style="
              margin-left: 20px;
              background-color: #4fc1b0;
              border-color: #4fc1b0;
              color: #fff;
            "
            >确定</el-button
          >
        </span>
      </div>
    </el-dialog>

    <!-- 修改模态框 -->
    <el-dialog
      title="修改"
      :visible.sync="isEditModalVisible"
      width="400px"
      :close-on-click-modal="false"
      class="qw"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="客户Id" v-if="yincang">
          <el-input
            v-model="editForm.client_id"
            autocomplete="off"
            placeholder="客户id"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="客户编号" v-if="yincang">
          <el-input
            v-model="editForm.w_code"
            autocomplete="off"
            placeholder="客户编号"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input
            v-model="editForm.client_name"
            autocomplete="off"
            placeholder="请输入客户名称"
             maxlength="20"
             show-word-limit  ></el-input>
        </el-form-item>
        <el-form-item label="负责人姓名">
          <el-input
            v-model="editForm.client_head"
            autocomplete="off"
            placeholder="请输入负责人姓名"
             maxlength="10"
             show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="负责人手机">
          <el-input
            v-model="editForm.client_phone"
            autocomplete="off"
            placeholder="请输入负责人手机"
             maxlength="11"
             show-word-limit ></el-input>
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input
            v-model="editForm.client_address"
            autocomplete="off"
            placeholder="请输入公司地址"
             maxlength="30"
             show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="editForm.client_remark"
            autocomplete="off"
            placeholder="请输入备注"
             maxlength="60"
             show-word-limit  ></el-input>
        </el-form-item>
      </el-form>
      <div>
        <span slot="footer" style="display: flex; justify-content: center">
          <el-button
            @click="isEditModalVisible = false"
            style="
              margin-right: 20px;
              background-color: #4fc1b0;
              border-color: #4fc1b0;
              color: #fff;
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="updateWarehouse"
            style="
              margin-left: 20px;
              background-color: #4fc1b0;
              border-color: #4fc1b0;
              color: #fff;
            "
            >修改</el-button
          >
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import $http from "@/routers/base";
import { MessageBox } from "element-ui";
export default {
  data() {
    return {
      yincang: false,
      currentPage: 1, //当前页
      pageSize: 10, //每页显示数
      rows: 0, //总行数
      list: [],

      isAddModalVisible: false, // 控制新增客户弹窗的显示状态
      isEditModalVisible: false,
      form: {
        // 初始化form对象
        w_code: "",
        client_name: "",
        client_head: "",
        client_phone: "",
        client_address: "",
        client_remark: "",
      },

      editForm: {
        client_id: "",
        w_code: "",
        client_name: "",
        client_head: "",
        client_phone: "",
        client_address: "",
        client_remark: "",
      },
    };
  },
  methods: {
    //查询客户列表
    async fetchData() {
      const response = await $http.get("bs_client/Index");
      this.list = response;
    },
    async submitForm() {
      if (this.validateForm()) {
        $http
          .post("bs_client/AddWarehouse", {
            w_code: this.form.w_code,
            client_name: this.form.client_name,
            client_head: this.form.client_head,
            client_phone: this.form.client_phone,
            client_address: this.form.client_address,
            client_remark: this.form.client_remark,
          })
          .then((response) => {
            if (response) {
              this.$message.success("添加成功！");
              this.fetchData();
                (this.form.client_name = ""),
                (this.form.client_head = ""),
                (this.form.client_phone = ""),
                (this.form.client_address = ""),
                (this.form.client_remark = ""),
                (this.isAddModalVisible = false);
            } else {
              this.$message.error("添加失败！请重新添加！");
            }
          })
          .catch((error) => {
            this.$message.error("添加失败：" + error.message);
          });
      }
    },

    // 显示新增客户弹窗
    showAddModal() {
      this.isAddModalVisible = true;
    },
   validateForm() {
    if (!this.form.client_name || this.form.client_name.length < 1 || this.form.client_name.length > 20) {
    this.$message.error('客户名称长度应在0到20个字符之间');
    return false;
  }
  if (!this.form.client_phone || this.form.client_phone.length !== 11) {
    this.$message.error('电话号码长度应为11位');
    return false;
  }
  if (!this.form.client_head || this.form.client_head.length < 2 || this.form.client_head.length > 10) {
    this.$message.error('客户姓名长度应在2到10个字符之间');
    return false;
  }
  if (!this.form.client_address) {
    this.$message.error('公司地址不能为空');
    return false;
  }
  if (!this.form.client_remark) {
    this.$message.error('备注不能为空');
    return false;
  }
  if (/\d/.test(this.form.client_head)) {
    this.$message.error('客户姓名不能包含数字');
    return false;
  }
  if (/^\d+$/.test(this.form.client_name)) {
    this.$message.error('供应商名称不能包含数字');
    return false;
  }
  return true; // 表单验证通过
},
    //  // 显示编辑客户模态框
    showEditModal() {
      this.isEditModalVisible = true;
    },

    //修改显示
    handleEdit(row) {
      this.$set(this.editForm, "client_id", row.client_id);
      this.$set(this.editForm, "w_code", row.w_code);
      this.$set(this.editForm, "client_name", row.client_name);
      this.$set(this.editForm, "client_head", row.client_head);
      this.$set(this.editForm, "client_phone", row.client_phone);
      this.$set(this.editForm, "client_address", row.client_address);
      this.$set(this.editForm, "client_remark", row.client_remark);
      this.isEditModalVisible = true;
    },
    //客户修改
    async updateWarehouse() {
      if (this.validateEditForm()) {
        $http
          .put("bs_client/updateClient", {
            client_id: this.editForm.client_id,
            w_code: this.editForm.w_code,
            client_name: this.editForm.client_name,
            client_head: this.editForm.client_head,
            client_phone: this.editForm.client_phone,
            client_address: this.editForm.client_address,
            client_remark: this.editForm.client_remark,
          })
          .then((response) => {
            if (response) {
              this.$message.success("修改成功！");
              this.fetchData();
              this.isEditModalVisible = false;
            } else {
              this.$message.error("修改失败！请重试！");
            }
          })
          .catch((error) => {
            this.$message.error("修改失败：" + error.message);
          });
      }
    },
    //修改非空判断
    async validateEditForm() {
      return (
        this.editForm.client_name.trim() !== "" &&
        this.editForm.client_head.trim() !== "" &&
        this.editForm.client_phone.trim() !== "" &&
        this.editForm.client_address.trim() !== "" &&
        this.editForm.client_remark.trim() !== ""
      );
    },
    //逻辑删除
    async handleDelete(client_id) {
      MessageBox.confirm("确认删除删除该条记录吗？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "bs_client",
      })
        .then(() => {
          $http
            .delete(`bs_client/DeleteWarehouse/${client_id}`)
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.fetchData();
            })
            .catch((error) => {
              this.$message.error("删除失败：" + error.message);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "管理员取消了删除,删除无效哦！",
          });
        });
    },
    fetchData() {
      this.where = "1=1";
      // 向后端请求数据，并更新客户数据和总条数
      $http
        .get("bs_client/getFenYe", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            where: this.where,
          },
        })
        .then((res) => {
          this.list = res.list;
          this.rows = res.rows;
        })
        .catch((error) => {
          console.error("Error fetching client data: ", error);
        });
    },

    change: function (size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.fetchData();
    },
    Ymchange: function (page) {
      this.currentPage = page;
      this.fetchData();
    },
    // 关闭模态框
    handleCloseModal() {  
      this.isAddModalVisible = false;

      this.isEditModalVisible = false;
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style>
/*表格单元格中的文本内容都将水平居中显示*/
.centered-table .el-table__cell {
  text-align: center;
}

/*表格标题背景变色*/
.centered-table .el-table__header th {
  background-color: #eeeeee;
  /* 设置标题行的背景色 */
  color: #333;
  /* 设置标题行的文字颜色 */
}

.customer-list {
  background-color: #ffffff;
  padding: 20px;
}

/*按钮的样式*/
.add-button {
  background-color: #4fc1b0;
  color: #ffffff;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.pagination-info {
  margin-bottom: 10px;
  text-align: right;
  /* 将当前显示条数等信息向右对齐 */
}

.add-button-bottom {
  position: fixed;
  /* 或者使用 absolute/relative，根据你的布局需求 */
  right: 0px;
  /* 确保按钮在右侧 */
  top: 100px;
  transform: translateY(-5px);
  /* 这会使元素向下移动60像素 */
  transform: translateX(-120px);
  /* 这会使元素向下移动60像素 */
}

/* 调整对话框样式 */
.el-dialog__body {
  padding: 0px 10px 30px 20px;
  /* 调整内边距 */
}

/* 模态框 */
.qw {
  position: fixed;
  top: 20%;
  left: 10%;

  height: 600px;
  overflow: hidden;
}
</style>
